
/**
 * 过滤网过滤.
 * 该场景由原来的 Filter (v0.1) 拆分而来
 */

addModule({
	name: "Filter",
	
	config : {

		// 持续时间
		duration: 10000,
	},
	
	temp : {
		groups: null,
		groupStatus: null,
		groupCount: null,
	},

	graphic: {
		opt: {},
		nodes: null,
	},
	
	// 用于存储分镜 1 正弦曲线的相位参数
	phase: [0],
	
	/**
	 * 本模块的初始化函数
	 */
	init : function() {
		// 调用: 将分镜 (子场景入口函数) 全部加到场景列表中去
		addSceneFunc("Filter-stage", this.stage, this.name, null);
	},

	stage : function() {
		var w = _width;
		var h = _height;
		var N = 25;// 随机小球数量

		var particles1 = new Array();
		var particles2 = new Array();
		var nodes = new Array();

		for (var i = 0; i < N; i++) {
			var r = 10;// 小球大小

			var y1=h / 2+(Math.random()*(1+1)-1) * 100;
			var y2=h / 2+(Math.random()*(1+1)-1)* 100;
			var opacity = Math.random() * 0.5 + 0.5;

			var particle1 = new echarts.graphic.Circle({
				shape: {
					cx: r,
					cy: y1,
					r: r
				},
				style: {
					fill: '#cb3131',
					opacity: opacity
				},
				silent: true
			});// 红点

			var particle2= new echarts.graphic.Circle({   
				shape: {
					cx: r,
					cy: y2,
					r: r
				},
				style: {
					fill: '#b7d7d3',
					opacity: opacity
				},
				silent: true
			});// 绿点

			particle1.animate('shape', true)
				.when(2500+Math.random()*2000, {
					cx: w,cy:h/2
				})
				.done(function () {
					zr.remove(particle1);
				})
				.start();

			if (y2<(h/2)){
				particle2.animate('shape', true)
				.when(2000+Math.random()*2000, {
					cx: 4*w/5
				})
				.when(2500+Math.random()*2000, {
					cx: 3*w/5,
					cy:0
				})
				.done(function () {
					zr.remove(particle2);
				})
				.start();
			} else {
				particle2.animate('shape', true)
				.when(2000+Math.random()*2000, {
					cx: 4*w/5
				})
				.when(2500+Math.random()*2000, {
					cx: 3*w/5,
					cy:h
				})
				.done(function () {
					zr.remove(particle2);
				})
				.start();
			}

			zr.add(particle1);
			particles1.push(particle1);

			zr.add(particle2);// 随机生成红绿点
			particles2.push(particle2);
		}

		// 生成网
		var k = 0;
		var groups = this.temp.groups = new Array();
		var groupStatus = this.temp.groupStatus = new Array();
		var groupCount = this.temp.groupCount = new Array();
		var yoffset = _height * 0.1;
		var ystep = (_height * 0.8) / 20;

		for(var m = 0; m < 5; m++){
			for (var n = 0; n < 20; n++){
				var x = m*20;
				var y = yoffset + ystep * n;
				var node=new echarts.graphic.Circle({
					shape: {
						cx: w,
						cy: 0,
						r: 8
					},
					style: {
						fill: '#153959',
						opacity: Math.random() * 0.5 + 0.5
					},
					zlevel: 1009
				});

				var delay = 200 * Math.random();
				var when = 600 + 400 * Math.random();
				if (delay + when > 1000) {
					when = 1000 - delay;
				}

				node.animate('shape',false)// 生成3D网格
					.delay(delay)
					.when(when,{
						cx:4*w/5+x,cy:y
					})
					.start('quadraticOut');

					zr.add(node);
					nodes[k]=node;
					k++;

				// 分组
				var gidx = m + n;
				var array = groups[gidx];
				if (array == null) {
					groups[gidx] = array = [];
				}
				array.push(node);
				groupStatus.push(2);
				groupCount.push(0);
			}
		}

		var glen = groups.length;
		for (var i = 0; i < glen; i++) {
			addRenderFunc(this.name + "-group" + i, function(idx) {
				this.groupNodeStart(idx);
			}, {
				once: true,
				delay: i * 60,
			}, i);
		}

		this.graphic.particles1 = particles1;
		this.graphic.particles2 = particles2;
		this.graphic.nodes = nodes;

		addRenderFunc(this.name + "-end",function(){
			var len1 = this.graphic.particles1.length;
			var len2 = this.graphic.particles2.length;
			var len3 = this.graphic.nodes.length;

			for (var i = 0; i < len3; i++) {
				var node = this.graphic.nodes[i];
				zr.remove(node); 
			}

			for (var i = 0; i < len1; i++) {
				var particle1 = this.graphic.particles1[i];
				zr.remove(particle1); 
			}

			for (var i = 0; i < len2; i++) {
				var particle2 = this.graphic.particles2[i];
				zr.remove(particle2); // 需要移除所有小球
			}
			endScene();

		},{
		   once : true,
		   delay : this.config.duration
		});
	},

	groupNodeStart: function(idx) {
		var nodes = this.temp.groups[idx];
		var status = this.temp.groupStatus[idx];
		this.temp.groupCount[idx]++;

		var finish = nodes.length;

		for (var i = 0; i < nodes.length; i++) {
			var node = nodes[i];
			if (status == 2) {
				// 缩小
				node.animate('shape', true)
					.when(700,{r: 4})
					.start('quadraticInOut');
			} else {
				// 放大
				node.animate('shape', true)
					.when(700,{r: 12})
					.start('quadraticInOut');
			}
		}

		addRenderFunc(this.name + "-group" + idx + "+" + this.temp.groupCount[idx],
			function() {
				this.groupNodeStart(idx);
			}, {
				once: true,
				delay: 700,
			});

		if (status == 2) {
			this.temp.groupStatus[idx] = 1;
		} else {
			this.temp.groupStatus[idx] = 2;
		}
	}
});
